<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>关于render的调用次数</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//第一步：定义组件（类式组件）
			class Weather extends React.Component{
				//构造器调用几次？—— 1次
				//this是谁？—— 组件实例对象
				constructor(props){
					console.log('---constructor---')
					super(props)
					//初始化state
					this.state = {isHot:true,wind:1}
					//下面这行代码为了解决this丢失的问题
					this.changeWeather = this.changeWeather.bind(this)
				}
				//render调用几次？—— 1+n次，1是初始化的那次，n是状态改变的次数
				//this是谁？—— 组件实例对象
				render(){
					console.log('---render---')
					return (
						<div>
							<h2>今天天气很{this.state.isHot ? '炎热':'凉爽'}，{this.state.wind}级风</h2>
							<button onClick={this.changeWeather}>切换天气</button>	
						</div>
					)
				}
				//changeWeather调用几次？ —— 点几次调几次
				//this是谁？—— 组件实例对象（因为构造器中已经处理了）
				changeWeather() {
					console.log('changeWeather被调用了')

					//在react中state中的数据不可以直接修改，下面这行就是直接修改，千万别这么写！
					// this.state.isHot = false //这行代码是不对的

					//想修改state中的数据，那么就要使用setState
					const {isHot,wind} = this.state
					this.setState({isHot:!isHot})
					this.setState({wind:wind+1})
					this.showMsg()
				}
				showMsg(){
					console.log('天气变化莫测，注意增添衣物')
				}
			}
			//第二步：渲染组件到页面
			ReactDOM.render(<Weather/>,document.getElementById('root'))

			

		</script>
	</body>
</html>